Commit b0994715 authored by Antonio's avatar Antonio 🇪🇺

Renaming & Shadow

parent 468239c4
This diff is collapsed.
This diff is collapsed.
.sc_card{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);box-shadow:0 2px 2px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);border-radius:4px;background:#fff;margin:2em auto;width:100%;overflow:hidden;padding:1em}.sc_card h1,.sc_card h2,.sc_card h3,.sc_card h4,.sc_card h5,.sc_card h6{font-size:1em;line-height:1.2em;margin:0 0 1em;font-weight:700}.sc_card p{font-size:1em}.sc_card p:last-child{margin-bottom:0}.sc_card p:empty{display:none;margin-bottom:0}.sc_card img{margin-bottom:1em;margin-top:-1em}.sc_card .sc_row{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:15px;margin-top:15px}.sc_card .sc_company{display:grid;grid-template-columns:2fr 1fr;grid-column-gap:15px}.sc_card .sc_company-logo-wrapper,.sc_card .sc_person-image-wrapper{height:auto;margin-top:15px;background:#fff;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.16),0 0 1px rgba(0,0,0,0.08);box-shadow:0 2px 2px rgba(0,0,0,0.16),0 0 1px rgba(0,0,0,0.08);border-radius:4px;max-width:100%;width:auto;overflow:hidden;margin-bottom:12px}.sc_card .sc_company-logo-wrapper img,.sc_card .sc_person-image-wrapper img{width:auto;height:auto;max-width:100%;margin:0}.sc_card .sc_grey-box{background:#f2f2f2;border-radius:4px;padding:16px}.sc_card .sc_grey-box .sc_box-label{font-style:normal;font-weight:600;font-size:14px;line-height:150%;text-transform:uppercase;color:#000;margin-bottom:12px}.sc_card .sc_input-group .sc_input-label{font-style:normal;font-weight:700;font-size:12px;line-height:150%;color:#000}.sc_card .wp-block-structured-content-person__colleague_url{font-size:.875em;word-break:break-word}@media (max-width: 468px){.sc_card p{padding:0 1em 1em}}@media (min-width: 469px){.sc_card img{float:right;margin-left:1em}}@media (max-width: 640px){.sc_card .sc_row{grid-template-columns:1fr;margin-top:0}.sc_card .sc_company{grid-template-columns:1fr}.sc_card .sc_grey-box{margin-top:15px}}.w-100{width:100%}i.mce-ico.mce-i-structured-content{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE5SURBVHgBrZThUcMwDIWfQrgDfiUbdASPkG7ABsAEhU3YAJigsEFHMBtkg+YX9OBi8YyTNmAuuG3enRM7tj/JkhVpzPkaQIFp1OQDWNO9OdYakIER7eZkFtb5cdT/3pv3WzJkty0+XjOcLBzwxIUVP9ehqeG8OugL4AxX05hjE8vGOagC94HTycOA05lyAYe9xTr0tXZwkkEWQN59F3rWeg8LwqqeI4yhxkfe9ocqdkY8TM2vfgScRNsYKvSmtJtHHKC1ObsWyMMP4G7y4jIEPEVZU9q3Z/zlYS+BLv0zTRq2jAF59DmS1UbJi4C8b1dIls/wpx0F0kPGMLkUvYd3o8DCvpc4QhGQ93KJPX4WdGA+CvSlhGTp/0kp7GaPLMcalt6Kt73GASLA9PU89LBSHF/WBOoKk0mbL1wWbz1nKPlvAAAAAElFTkSuQmCC") !important;background-size:85%;background-repeat:no-repeat;background-position:center;margin-right:4px}.mce-window.mce-container.mce-sc_panel .mce-container-body.mce-abs-layout{overflow:hidden}
/**
* #.# Common SCSS
*
* Can include things like variables and mixins
* that are used across the project.
*/
/**
Sizes
*/
/**
Fonts
*/
/**
Colors
*/
/**
Common Styles
*/
.sc_card {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
border-radius: 4px;
background: #fff;
margin: 2em auto;
width: 100%;
overflow: hidden;
padding: 1em; }
.sc_card h1, .sc_card h2, .sc_card h3, .sc_card h4, .sc_card h5, .sc_card h6 {
font-size: 1em;
line-height: 1.2em;
margin: 0 0 1em;
font-weight: 700; }
.sc_card p {
font-size: 1em; }
.sc_card p:last-child {
margin-bottom: 0; }
.sc_card p:empty {
display: none;
margin-bottom: 0; }
.sc_card img {
margin-bottom: 1em;
margin-top: -1em; }
.sc_card .sc_row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 16px; }
.sc_card .sc_row + .sc_row {
margin-top: 16px; }
.sc_card .sc_company {
display: grid;
grid-template-columns: 2fr 1fr;
grid-column-gap: 16px; }
.sc_card .sc_company-logo-wrapper,
.sc_card .sc_person-image-wrapper {
height: auto;
margin-top: 15px;
background: #fff;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: 4px;
max-width: 100%;
width: auto;
overflow: hidden;
margin-bottom: 12px; }
.sc_card .sc_company-logo-wrapper img,
.sc_card .sc_person-image-wrapper img {
width: auto;
height: auto;
max-width: 100%;
margin: 0; }
.sc_card .sc_grey-box {
background: #f2f2f2;
border-radius: 4px;
padding: 16px; }
.sc_card .sc_grey-box .sc_box-label {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 150%;
text-transform: uppercase;
color: #000;
margin-bottom: 12px; }
.sc_card .sc_input-group .sc_input-label {
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 125%;
color: #1A202C;
margin-bottom: 8px; }
.sc_card .wp-block-structured-content-person__colleague_url {
font-size: .875em;
word-break: break-word; }
@media (max-width: 468px) {
.sc_card p {
padding: 0 1em 1em; } }
@media (min-width: 469px) {
.sc_card img {
float: right;
margin-left: 1em; } }
@media (max-width: 640px) {
.sc_card .sc_row {
grid-template-columns: 1fr;
margin-top: 0; }
.sc_card .sc_company {
grid-template-columns: 1fr; }
.sc_card .sc_grey-box {
margin-top: 15px; } }
/** TinyMCE **/
.w-100 {
width: 100%; }
/**
* All of the CSS for your admin-specific functionality should be
* included in this file.
*/
i.mce-ico.mce-i-structured-content {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE5SURBVHgBrZThUcMwDIWfQrgDfiUbdASPkG7ABsAEhU3YAJigsEFHMBtkg+YX9OBi8YyTNmAuuG3enRM7tj/JkhVpzPkaQIFp1OQDWNO9OdYakIER7eZkFtb5cdT/3pv3WzJkty0+XjOcLBzwxIUVP9ehqeG8OugL4AxX05hjE8vGOagC94HTycOA05lyAYe9xTr0tXZwkkEWQN59F3rWeg8LwqqeI4yhxkfe9ocqdkY8TM2vfgScRNsYKvSmtJtHHKC1ObsWyMMP4G7y4jIEPEVZU9q3Z/zlYS+BLv0zTRq2jAF59DmS1UbJi4C8b1dIls/wpx0F0kPGMLkUvYd3o8DCvpc4QhGQ93KJPX4WdGA+CvSlhGTp/0kp7GaPLMcalt6Kt73GASLA9PU89LBSHF/WBOoKk0mbL1wWbz1nKPlvAAAAAElFTkSuQmCC") !important;
background-size: 85%;
background-repeat: no-repeat;
background-position: center;
margin-right: 4px; }
.mce-window.mce-container.mce-sc_panel .mce-container-body.mce-abs-layout {
overflow: hidden; }
/**
* #.# Styles
*
* CSS for both Frontend+Backend.
*/
......@@ -425,6 +425,7 @@ registerBlockType(`structured-content/${blockName}`, {
value={hours}
/>
</div>
<span>:</span>
<div className="sc_input-group">
<div className="sc_input-label">
{__('Minutes', 'structured-content')}
......@@ -506,7 +507,7 @@ registerBlockType(`structured-content/${blockName}`, {
})
}
</div>
<SC_Button action={addSupply} icon={true}>
<SC_Button action={addSupply} icon={true} className="no-margin-top">
{__('Add Supply', 'structured-content')}
</SC_Button>
</div>
......@@ -549,7 +550,7 @@ registerBlockType(`structured-content/${blockName}`, {
})
}
</div>
<SC_Button action={addTool} icon={true}>
<SC_Button action={addTool} icon={true} className="no-margin-top">
{__('Add Tool', 'structured-content')}
</SC_Button>
</div>
......@@ -583,6 +584,8 @@ registerBlockType(`structured-content/${blockName}`, {
</div>
<TextControl
value={data.name}
placeholder={__('Enter your Step Title here...', 'structured-content')}
keepplaceholderonfocus="true"
type="text"
onChange={(value) => (setAttributes(
steps[index] = {...steps[index], 'name': value}
......@@ -593,8 +596,11 @@ registerBlockType(`structured-content/${blockName}`, {
<div className="sc_input-label">
{__('Instruction', 'structured-content')}
</div>
<TextareaControl
<RichText
value={data.instruction}
placeholder={__('Enter your instruction here...', 'structured-content')}
keepplaceholderonfocus="true"
className="sc_input__instruction"
onChange={(value) => (setAttributes(
steps[index] = {...steps[index], 'instruction': value}
))}
......
......@@ -9,13 +9,13 @@
/**
Sizes
*/
$border-radius: 4px;
$main-unit: 16px;
$borderRadius: 4px;
$basePixel: 16px;
/**
Fonts
*/
$os-fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$fontFamilySans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
/**
Colors
......@@ -28,8 +28,8 @@ $light-green: #DAF1E8;
Common Styles
*/
.sc_card {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: $border-radius;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
border-radius: $borderRadius;
background: #fff;
margin: 2em auto;
width: 100%;
......@@ -64,14 +64,20 @@ $light-green: #DAF1E8;
.sc_row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 15px;
margin-top: 15px;
grid-column-gap: $basePixel;
+ {
.sc_row {
margin-top: $basePixel;
}
}
}
.sc_company {
display: grid;
grid-template-columns: 2fr 1fr;
grid-column-gap: 15px;
grid-column-gap: $basePixel;
}
.sc_company-logo-wrapper,
......@@ -80,11 +86,11 @@ $light-green: #DAF1E8;
margin-top: 15px;
background: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: $border-radius;
border-radius: $borderRadius;
max-width: 100%;
width: auto;
overflow: hidden;
margin-bottom: $main-unit * .75;
margin-bottom: $basePixel * .75;
img {
width: auto;
......@@ -96,8 +102,8 @@ $light-green: #DAF1E8;
.sc_grey-box {
background: #f2f2f2;
border-radius: $border-radius;
padding: $main-unit;
border-radius: $borderRadius;
padding: $basePixel;
.sc_box-label {
font-style: normal;
......@@ -106,17 +112,18 @@ $light-green: #DAF1E8;
line-height: 150%;
text-transform: uppercase;
color: #000;
margin-bottom: $main-unit * .75;
margin-bottom: $basePixel * .75;
}
}
.sc_input-group {
.sc_input-label {
font-style: normal;
font-weight: 700;
font-weight: normal;
font-size: 12px;
line-height: 150%;
color: #000;
line-height: 125%;
color: #1A202C;
margin-bottom: 8px
}
}
......
......@@ -5,54 +5,93 @@
* which makes it higher in priority.
*/
@mixin placeholder {
::-webkit-input-placeholder {
@content
}
:-moz-placeholder {
@content
}
::-moz-placeholder {
@content
}
:-ms-input-placeholder {
@content
}
}
@mixin inputBase {
background: white;
border-radius: 4px;
border: 1px solid #cbd5e0;
padding: 4px 8px;
font-size: 13px;
color: #1A202C;
@include placeholder {
color: #CBD5E0;
}
&.is-selected,
&:focus {
border: 1px solid #718096;
box-shadow: none;
outline: none;
}
}
.editor-styles-wrapper {
.sc_multi-wrapper {
background: #f5f5f5;
padding: 16px;
border-radius: $border-radius;
background: #F7FAFC;
border: 1px solid #e2e8ed;
padding: $basePixel;
border-radius: $borderRadius;
.sc_card {
margin: $main-unit auto 0;
margin: $basePixel auto 0;
}
}
a.sc_info-label {
background: $light-green;
border-radius: $border-radius;
padding: $main-unit * .25;
font-size: $main-unit * .875;
line-height: $main-unit * 1.125;
border-radius: $borderRadius;
padding: $basePixel * .25;
font-size: $basePixel * .875;
line-height: $basePixel * 1.125;
color: $green;
padding-left: $main-unit * 1.5;
padding-left: $basePixel * 1.5;
display: table;
position: relative;
text-decoration: none;
svg {
width: $main-unit;
height: $main-unit;
width: $basePixel;
height: $basePixel;
display: inline-block;
fill: $green;
position: absolute;
left: $main-unit * .25;
top: $main-unit * .25;
left: $basePixel * .25;
top: $basePixel * .25;
}
}
button {
&.sc_button {
background-color: black;
background-color: #1A202C;
color: white;
border-radius: $border-radius;
padding: $main-unit * .5;
font-size: $main-unit * .75;
border-radius: $borderRadius;
padding: $basePixel * .5;
font-size: $basePixel * .75;
border: none;
position: relative;
cursor: pointer;
width: 100%;
margin-top: $main-unit;
margin-top: $basePixel;
&:hover {
background-color: hsla(220, 26%, 18%, 1);
}
&.no-margin-top {
margin-top: 0;
......@@ -61,19 +100,19 @@
&.delete {
border-radius: 100%;
position: absolute;
width: $main-unit * 2.25;
height: $main-unit * 2.25;
width: $basePixel * 2.25;
height: $basePixel * 2.25;
top: -1.5em;
right: -3em;
}
.icon-span {
display: inline;
margin-right: $main-unit * .5;
margin-right: $basePixel * .5;
svg {
width: $main-unit * .75;
height: $main-unit * .75;
width: $basePixel * .75;
height: $basePixel * .75;
position: relative;
top: 1px;
fill: white;
......@@ -81,7 +120,7 @@
}
&.inline {
margin-left: $main-unit * .5;
margin-left: $basePixel * .5;
margin-top: 0;
width: auto;
float: right;
......@@ -95,10 +134,12 @@
}
}
.sc_input-group fieldset {
padding: 0;
border: 0;
margin: 0;
.sc_input-group {
fieldset {
padding: 0;
border: 0;
margin: 0;
}
}
.sc_toggle-bar {
......@@ -121,11 +162,11 @@
height: auto;
background: white;
box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px, rgba(0, 0, 0, 0.08) 0px 0px 1px;
border-radius: $border-radius;
border-radius: $borderRadius;
max-width: 100%;
width: auto;
overflow: hidden;
margin-bottom: $main-unit * .75;
margin-bottom: $basePixel * .75;
img {
width: auto;
......@@ -134,6 +175,23 @@
margin: 0;
}
}
.sc_grey-box {
background: #f7fAFC;
border-radius: 4px;
padding: 16px;
border: 1px solid #cbd5E0;
}
.sc_box-label {
color: #1A202C;
font-weight: bold;
margin-bottom: 16px;
}
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"] {
@include inputBase;
}
}
.sc_row {
......@@ -143,25 +201,44 @@
@at-root #{&}--parts {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr $main-unit * 1.875;
grid-column-gap: $main-unit;
margin-top: $main-unit * .5;
grid-template-columns: 1fr 1fr 1fr 1fr $basePixel * 1.875;
grid-column-gap: $basePixel;
margin-top: $basePixel * .5;
}
@at-root #{&}--totalTime {
margin: 0 -8px;
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr auto 1fr;
> span {
text-align: center;
}
> div {
padding: 0 8px;
}
}
}
.sc_input__id {
color: #718096;
.sc_input {
@at-root #{&}__id {
color: #718096;
}
@at-root #{&}__instruction {
@include inputBase;
}
}
.sc_howToLayout {
background: #F7FAFC;
border: 16px solid white;
border-radius: $border-radius;
border-radius: $borderRadius;
box-shadow: 0 0 0 1px #E2E8ED;
color: #1A202C;
margin-bottom: $main-unit * 2;
margin-bottom: $basePixel * 2;
padding: 1em;
min-height: $main-unit * 15;
min-height: $basePixel * 15;
width: 100%;
text-align: center;
display: flex;
......@@ -170,13 +247,13 @@
justify-content: center;
@at-root #{&}__label {
font-family: $os-fontFamily;
font-size: $main-unit;
font-family: $fontFamilySans;
font-size: $basePixel;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: $main-unit;
margin-bottom: $basePixel;
svg {
fill: currentColor;
......@@ -185,9 +262,9 @@
}
@at-root #{&}__instructions {
font-family: $os-fontFamily;
font-size: $main-unit * .875;
line-height: $main-unit * 1.125;
font-family: $fontFamilySans;
font-size: $basePixel * .875;
line-height: $basePixel * 1.125;
max-width: 30ch;
margin-bottom: 24px;
}
......@@ -203,7 +280,7 @@
> li {
list-style: none;
margin: 0 $main-unit * .5 $main-unit * .5;
margin: 0 $basePixel * .5 $basePixel * .5;
flex-shrink: 1;
}
}
......@@ -222,13 +299,13 @@
background: white;
border: 1px solid #CBD5E0;
box-sizing: border-box;
border-radius: $border-radius;
padding: $main-unit;
border-radius: $borderRadius;
padding: $basePixel;
color: #1A202C;
font-size: $main-unit;
line-height: $main-unit;
font-size: $basePixel;
line-height: $basePixel;
text-align: center;
font-family: $os-fontFamily;
font-family: $fontFamilySans;
font-weight: bold;
cursor: pointer;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment