revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 12:52:42 +01:00
Code Issues Releases Wiki Activity

Redesign Diviner

Browse source 
Summary:
This implements `PHUIDocumentViewPro` which should move to be the base for all documents (Phame, Phriction, Legalpad, Diviner). Overall this feels really good to me, but I'd like to roll it out into Diviner specifically first to work through the issues and then move into other apps and drop `PHUIDocumentView` once everything is converted. Some features are:

 - White Background, no border on page
 - Table of Contents is move to hidden menu (more space for documentation)
 - Property List sits under the document

Some design decisions above are in anticipation of Phriction v3 and Unbeta Phame, specifically commenting and maybe some cool new Remarkup text layout options for Phame.

Test Plan:
Went through tons of pages on Diviner on Desktop, Tablet, Mobile. Bounce back to Phriction to make sure DocumentView CSS changes actually look better there.

{F930518}

{F930519}

{F930520}

{F930521}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: tycho.tatitscheff, joshuaspence, Korvin

Differential Revision: https://secure.phabricator.com/D14374
This commit is contained in:
Chad Little 2015-11-01 08:56:46 -08:00
parent 2c2d1d13e3
commit c45ba30416
15 changed files with 338 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
resources/celerity/map.php
View file

@ -7,7 +7,7 @@
*/
return array(
'names' => array(
'core.pkg.css' => '15e557bc',
'core.pkg.css' => 'a56d7104',
'core.pkg.js' => '47dc9ebb',
'darkconsole.pkg.js' => 'e7393ebb',
'differential.pkg.css' => '2de124c9',
@ -103,11 +103,11 @@ return array(
'rsrc/css/application/slowvote/slowvote.css' => '475b4bd2',
'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
'rsrc/css/application/uiexample/example.css' => '528b19de',
'rsrc/css/core/core.css' => 'a76cefc9',
'rsrc/css/core/remarkup.css' => '8d341238',
'rsrc/css/core/core.css' => '78e8d7ea',
'rsrc/css/core/remarkup.css' => 'f18999d1',
'rsrc/css/core/syntax.css' => '9fd11da8',
'rsrc/css/core/z-index.css' => '57ddcaa2',
'rsrc/css/diviner/diviner-shared.css' => '5a337049',
'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
'rsrc/css/font/font-awesome.css' => 'd2fc4e8d',
'rsrc/css/font/font-lato.css' => '5ab1a46a',
'rsrc/css/font/font-roboto-slab.css' => 'f24a53cb',
@ -126,9 +126,10 @@ return array(
'rsrc/css/phui/phui-box.css' => 'a5bb366d',
'rsrc/css/phui/phui-button.css' => '16020a60',
'rsrc/css/phui/phui-crumbs-view.css' => 'd842f867',
'rsrc/css/phui/phui-document.css' => '0267054b',
'rsrc/css/phui/phui-document-pro.css' => '3657eb4b',
'rsrc/css/phui/phui-document.css' => '78521ba3',
'rsrc/css/phui/phui-feed-story.css' => 'b7b26d23',
'rsrc/css/phui/phui-fontkit.css' => 'cb8ae7ad',
'rsrc/css/phui/phui-fontkit.css' => '7837a28c',
'rsrc/css/phui/phui-form-view.css' => '621b21c5',
'rsrc/css/phui/phui-form.css' => 'afdb2c6e',
'rsrc/css/phui/phui-header-view.css' => '55bb32dd',
@ -523,7 +524,7 @@ return array(
'diffusion-icons-css' => '2941baf1',
'diffusion-readme-css' => '2106ea08',
'diffusion-source-css' => '075ba788',
'diviner-shared-css' => '5a337049',
'diviner-shared-css' => 'aa3656aa',
'font-fontawesome' => 'd2fc4e8d',
'font-lato' => '5ab1a46a',
'font-roboto-slab' => 'f24a53cb',
@ -713,7 +714,7 @@ return array(
'phabricator-busy' => '59a7976a',
'phabricator-chatlog-css' => 'd295b020',
'phabricator-content-source-view-css' => '4b8b05d4',
'phabricator-core-css' => 'a76cefc9',
'phabricator-core-css' => '78e8d7ea',
'phabricator-countdown-css' => 'e7544472',
'phabricator-dashboard-css' => 'eb458607',
'phabricator-drag-and-drop-file-upload' => 'ad10aeac',
@ -735,7 +736,7 @@ return array(
'phabricator-object-selector-css' => '85ee8ce6',
'phabricator-phtize' => 'd254d646',
'phabricator-prefab' => '6920d200',
'phabricator-remarkup-css' => '8d341238',
'phabricator-remarkup-css' => 'f18999d1',
'phabricator-search-results-css' => '7dea472c',
'phabricator-shaped-request' => '7cbe244b',
'phabricator-side-menu-view-css' => 'bec2458e',
@ -775,10 +776,11 @@ return array(
'phui-calendar-list-css' => 'c1c7f338',
'phui-calendar-month-css' => '476be7e0',
'phui-crumbs-view-css' => 'd842f867',
'phui-document-view-css' => '0267054b',
'phui-document-view-css' => '78521ba3',
'phui-document-view-pro-css' => '3657eb4b',
'phui-feed-story-css' => 'b7b26d23',
'phui-font-icon-base-css' => 'ecbbb4c2',
'phui-fontkit-css' => 'cb8ae7ad',
'phui-fontkit-css' => '7837a28c',
'phui-form-css' => 'afdb2c6e',
'phui-form-view-css' => '621b21c5',
'phui-header-view-css' => '55bb32dd',

2
src/__phutil_library_map__.php
View file

@ -1433,6 +1433,7 @@ phutil_register_library_map(array(
'PHUIDiffTwoUpInlineCommentRowScaffold' => 'infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php',
'PHUIDocumentExample' => 'applications/uiexample/examples/PHUIDocumentExample.php',
'PHUIDocumentView' => 'view/phui/PHUIDocumentView.php',
'PHUIDocumentViewPro' => 'view/phui/PHUIDocumentViewPro.php',
'PHUIFeedStoryExample' => 'applications/uiexample/examples/PHUIFeedStoryExample.php',
'PHUIFeedStoryView' => 'view/phui/PHUIFeedStoryView.php',
'PHUIFormDividerControl' => 'view/form/control/PHUIFormDividerControl.php',
@ -5338,6 +5339,7 @@ phutil_register_library_map(array(
'PHUIDiffTwoUpInlineCommentRowScaffold' => 'PHUIDiffInlineCommentRowScaffold',
'PHUIDocumentExample' => 'PhabricatorUIExample',
'PHUIDocumentView' => 'AphrontTagView',
'PHUIDocumentViewPro' => 'AphrontTagView',
'PHUIFeedStoryExample' => 'PhabricatorUIExample',
'PHUIFeedStoryView' => 'AphrontView',
'PHUIFormDividerControl' => 'AphrontFormControl',

4
src/applications/base/controller/PhabricatorController.php
View file

@ -334,6 +334,10 @@ abstract class PhabricatorController extends AphrontController {
}
}
if (idx($options, 'class')) {
$page->addClass($options['class']);
}
if (!($view instanceof AphrontSideNavFilterView)) {
$nav = new AphrontSideNavFilterView();
$nav->appendChild($view);

25
src/applications/diviner/controller/DivinerAtomController.php
View file

@ -58,13 +58,7 @@ final class DivinerAtomController extends DivinerController {
$crumbs->addTextCrumb($atom_short_title);
$header = id(new PHUIHeaderView())
->setHeader($this->renderFullSignature($symbol))
->addTag(
id(new PHUITagView())
->setType(PHUITagView::TYPE_STATE)
->setBackgroundColor(PHUITagView::COLOR_BLUE)
->setName(DivinerAtom::getAtomTypeNameString(
$atom ? $atom->getType() : $symbol->getType())));
->setHeader($this->renderFullSignature($symbol));
$properties = new PHUIPropertyListView();
@ -78,11 +72,11 @@ final class DivinerAtomController extends DivinerController {
$prop_list = new PHUIPropertyGroupView();
$prop_list->addPropertyList($properties);
$document = id(new PHUIDocumentView())
$document = id(new PHUIDocumentViewPro())
->setBook($book->getTitle(), $group_name)
->setHeader($header)
->addClass('diviner-view')
->appendChild($prop_list);
->setPropertyList($prop_list);
if ($atom) {
$this->buildDefined($properties, $symbol);
@ -163,10 +157,6 @@ final class DivinerAtomController extends DivinerController {
->setHeader($spec['title']));
$task_methods = idx($methods_by_task, $spec['name'], array());
$inner_box = id(new PHUIBoxView())
->addPadding(PHUI::PADDING_LARGE_LEFT)
->addPadding(PHUI::PADDING_LARGE_RIGHT)
->addPadding(PHUI::PADDING_LARGE_BOTTOM);
$box_content = array();
if ($task_methods) {
@ -198,7 +188,7 @@ final class DivinerAtomController extends DivinerController {
$box_content = phutil_tag('em', array(), $no_methods);
}
$inner_box->appendChild($box_content);
$inner_box = phutil_tag_div('diviner-task-items', $box_content);
$section->addContent($inner_box);
}
$document->appendChild($section);
@ -246,7 +236,7 @@ final class DivinerAtomController extends DivinerController {
->setHref('#'.$key));
}
$document->setSideNav($side, PHUIDocumentView::NAV_TOP);
$document->setToc($side);
}
return $this->buildApplicationPage(
@ -256,6 +246,7 @@ final class DivinerAtomController extends DivinerController {
),
array(
'title' => $symbol->getTitle(),
'class' => 'pro-white-background',
));
}
@ -629,7 +620,7 @@ final class DivinerAtomController extends DivinerController {
$content = phutil_tag(
'div',
array(
'class' => 'phabricator-remarkup',
'class' => 'phabricator-remarkup diviner-remarkup-section',
),
$content);
} else {
@ -668,8 +659,6 @@ final class DivinerAtomController extends DivinerController {
if (($impl !== $parent) || $out) {
$where = id(new PHUIBoxView())
->addPadding(PHUI::PADDING_MEDIUM_LEFT)
->addPadding(PHUI::PADDING_MEDIUM_RIGHT)
->addClass('diviner-method-implementation-header')
->appendChild($impl->getName());
$doc = array($where, $doc);

3
src/applications/diviner/controller/DivinerBookController.php
View file

@ -53,7 +53,7 @@ final class DivinerBookController extends DivinerController {
->setName($book->getRepository()->getMonogram()));
}
$document = new PHUIDocumentView();
$document = new PHUIDocumentViewPro();
$document->setHeader($header);
$document->addClass('diviner-view');
@ -111,6 +111,7 @@ final class DivinerBookController extends DivinerController {
),
array(
'title' => $book->getTitle(),
'class' => 'pro-white-background',
));
}

9
src/applications/diviner/controller/DivinerMainController.php
View file

@ -30,7 +30,7 @@ final class DivinerMainController extends DivinerController {
->setHeader(pht('Documentation Books'))
->addActionLink($query_button);
$document = new PHUIDocumentView();
$document = new PHUIDocumentViewPro();
$document->setHeader($header);
$document->addClass('diviner-view');
@ -45,10 +45,7 @@ final class DivinerMainController extends DivinerController {
$list[] = $item;
}
$list = id(new PHUIBoxView())
->addPadding(PHUI::PADDING_LARGE_LEFT)
->addPadding(PHUI::PADDING_LARGE_RIGHT)
->addPadding(PHUI::PADDING_SMALL_TOP)
->addPadding(PHUI::PADDING_SMALL_BOTTOM)
->addPadding(PHUI::PADDING_MEDIUM_TOP)
->appendChild($list);
$document->appendChild($list);
@ -82,7 +79,7 @@ final class DivinerMainController extends DivinerController {
),
array(
'title' => pht('Documentation Books'),
'fonts' => true,
'class' => 'pro-white-background',
));
}
}

6
src/applications/diviner/view/DivinerSectionView.php
View file

@ -30,12 +30,10 @@ final class DivinerSectionView extends AphrontTagView {
$header = id(new PHUIHeaderView())
->setBleedHeader(true)
->addClass('diviner-section-header')
->setHeader($this->header);
$content = id(new PHUIBoxView())
->addPadding(PHUI::PADDING_LARGE_LEFT)
->addPadding(PHUI::PADDING_LARGE_RIGHT)
->appendChild($this->content);
$content = phutil_tag_div('diviner-section-content', $this->content);
return array($header, $content);
}

10
src/view/page/PhabricatorStandardPageView.php
View file

@ -11,6 +11,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
private $glyph;
private $menuContent;
private $showChrome = true;
private $classes = array();
private $disableConsole;
private $pageObjects = array();
private $applicationMenu;
@ -67,6 +68,11 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
return $this->showChrome;
}
public function addClass($class) {
$this->classes[] = $class;
return $this;
}
public function appendPageObjects(array $objs) {
foreach ($objs as $obj) {
$this->pageObjects[] = $obj;
@ -511,7 +517,9 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
}
$classes[] = 'phui-theme-'.PhabricatorEnv::getEnvConfig('ui.header-color');
foreach ($this->classes as $class) {
$classes[] = $class;
}
return implode(' ', $classes);
}

136
src/view/phui/PHUIDocumentViewPro.php Normal file
View file

@ -0,0 +1,136 @@
<?php
final class PHUIDocumentViewPro extends AphrontTagView {
private $header;
private $bookname;
private $bookdescription;
private $fluid;
private $propertyList;
private $toc;
public function setHeader(PHUIHeaderView $header) {
$header->setTall(true);
$this->header = $header;
return $this;
}
public function setBook($name, $description) {
$this->bookname = $name;
$this->bookdescription = $description;
return $this;
}
public function setFluid($fluid) {
$this->fluid = $fluid;
return $this;
}
public function setPropertyList($view) {
$this->propertyList = $view;
return $this;
}
public function setToc(PHUIListView $toc) {
$this->toc = $toc;
return $this;
}
protected function getTagAttributes() {
$classes = array();
if ($this->fluid) {
$classes[] = 'phui-document-fluid';
}
return array(
'class' => $classes,
);
}
protected function getTagContent() {
require_celerity_resource('phui-document-view-css');
require_celerity_resource('phui-document-view-pro-css');
Javelin::initBehavior('phabricator-reveal-content');
$classes = array();
$classes[] = 'phui-document-view';
$classes[] = 'phui-document-view-pro';
$book = null;
if ($this->bookname) {
$book = pht('%s (%s)', $this->bookname, $this->bookdescription);
}
$main_content = $this->renderChildren();
if ($book) {
$this->header->setSubheader($book);
}
$table_of_contents = null;
if ($this->toc) {
$toc = array();
$toc_id = celerity_generate_unique_node_id();
$toc[] = id(new PHUIButtonView())
->setTag('a')
->setIconFont('fa-align-left')
->setColor(PHUIButtonView::SIMPLE)
->addClass('phui-document-toc')
->addSigil('jx-toggle-class')
->setMetaData(array(
'map' => array(
$toc_id => 'phui-document-toc-open',
),
));
$toc[] = phutil_tag(
'div',
array(
'class' => 'phui-list-sidenav phui-document-toc-list',
),
$this->toc);
$table_of_contents = phutil_tag(
'div',
array(
'class' => 'phui-document-toc-container',
'id' => $toc_id,
),
$toc);
}
$content_inner = phutil_tag(
'div',
array(
'class' => 'phui-document-inner',
),
array(
$table_of_contents,
$this->header,
$main_content,
));
$content = phutil_tag(
'div',
array(
'class' => 'phui-document-content',
),
$content_inner);
$view = phutil_tag(
'div',
array(
'class' => implode(' ', $classes),
),
$content);
$list = null;
if ($this->propertyList) {
$list = phutil_tag_div('phui-document-properties', $this->propertyList);
}
return array($view, $list);
}
}

4
webroot/rsrc/css/core/core.css
View file

@ -173,3 +173,7 @@ hr {
height: 2px;
background: {$sky};
}
html body.pro-white-background {
background-color: white;
}

29
webroot/rsrc/css/core/remarkup.css
View file

@ -363,35 +363,12 @@ body div.phabricator-remarkup.remarkup-has-toc
padding-top: 0;
}
body .phabricator-remarkup p:first-child,
body .phabricator-remarkup ul.remarkup-list:first-child,
body .phabricator-remarkup ol.remarkup-list:first-child,
body .phabricator-remarkup .remarkup-code-block:first-child,
body .phabricator-remarkup h1.remarkup-header:first-child,
body .phabricator-remarkup h2.remarkup-header:first-child,
body .phabricator-remarkup h3.remarkup-header:first-child,
body .phabricator-remarkup h4.remarkup-header:first-child,
body .phabricator-remarkup h5.remarkup-header:first-child,
body .phabricator-remarkup h6.remarkup-header:first-child,
body .phabricator-remarkup blockquote:first-child,
body .phabricator-remarkup table.remarkup-table:first-child,
body .phabricator-remarkup .remarkup-note:first-child {
body .phabricator-remarkup *:first-child,
body .phabricator-remarkup .remarkup-header + * {
margin-top: 0;
}
body .phabricator-remarkup p:last-child,
body .phabricator-remarkup ul.remarkup-list:last-child,
body .phabricator-remarkup ol.remarkup-list:last-child,
body .phabricator-remarkup .remarkup-code-block:last-child,
body .phabricator-remarkup h1.remarkup-header:last-child,
body .phabricator-remarkup h2.remarkup-header:last-child,
body .phabricator-remarkup h3.remarkup-header:last-child,
body .phabricator-remarkup h4.remarkup-header:last-child,
body .phabricator-remarkup h5.remarkup-header:last-child,
body .phabricator-remarkup h6.remarkup-header:last-child,
body .phabricator-remarkup blockquote:last-child,
body .phabricator-remarkup table.remarkup-table:last-child,
body .phabricator-remarkup .remarkup-note:last-child {
body .phabricator-remarkup *:last-child {
margin-bottom: 0;
}

58
webroot/rsrc/css/diviner/diviner-shared.css
View file

@ -8,7 +8,7 @@
}
.diviner-table-view {
margin: 0 16px 24px;
margin: 0 0 24px;
}
.device-phone .diviner-table-view {
@ -65,38 +65,64 @@
padding: 0 8px 16px 0;
}
body .diviner-document-section .phui-header-header {
width: 100%;
.phui-header-shell.diviner-section-header .phui-header-header {
color: #000;
font-size: 20px;
font-weight: bold;
margin: 0;
padding: 0;
}
body .diviner-view .diviner-document-section
.phui-header-shell.diviner-section-header {
padding: 0 24px 8px 0;
border-bottom: 1px solid {$thinblueborder};
margin: 32px 0 16px;
}
body .diviner-document-section .phui-header-shell.phui-bleed-header {
padding: 0;
padding: 16px 0 0 0;
border-bottom: none;
}
.phui-property-list-view + .diviner-document-section {
margin-top: -1px;
body .diviner-view .diviner-section-content .phui-header-shell {
margin: 24px 0 8px;
padding: 0;
border: none;
}
.diviner-message-not-documented {
color: {$lightgreytext};
font-style: italic;
margin: 16px;
margin: 12px 0 32px;
font-size: {$biggerfontsize};
}
.diviner-atom-signature {
font-weight: normal;
.diviner-document-section .diviner-message-not-documented {
margin-left: 0;
margin-right: 0;
}
.phui-document-content .phabricator-remarkup.diviner-remarkup-section {
padding: 16px 0 32px 0;
}
.diviner-atom-signature-name {
font-weight: bold;
color: {$violet};
}
.diviner-atom-signature {
font-weight: normal;
color: #000;
}
.phui-header-view .phui-header-header a.diviner-atom-signature-name {
color: {$violet};
}
.phui-header-view .phui-header-header a.diviner-atom-signature-name:hover {
text-decoration: underline !important;
}
.diviner-list .diviner-atom-signature {
color: {$violet};
margin-left: -16px;
}
@ -126,7 +152,7 @@ body .diviner-document-section .phui-header-shell.phui-bleed-header {
}
.diviner-list {
padding-left: 12px;
padding-left: 17px;
}
.diviner-list li {
@ -150,8 +176,8 @@ body .diviner-document-section .phui-header-shell.phui-bleed-header {
text-decoration: none;
}
.device-desktop .diviner-book-item:hover {
background-color: #F5EEFF;
.device-desktop .diviner-book-item:hover .diviner-book-item-title {
color: {$violet};
}
.diviner-book-item-title {

108
webroot/rsrc/css/phui/phui-document-pro.css Normal file
View file

@ -0,0 +1,108 @@
/**
* @provides phui-document-view-pro-css
*/
.phui-document-view.phui-document-view-pro {
max-width: 800px;
padding: 0 16px;
position: relative;
margin: 16px auto;
}
.phui-document-properties {
max-width: 800px;
padding: 0 16px;
background-color: {$lightgreybackground};
margin: 0 auto;
border-radius: 3px;
}
.device-phone .phui-document-properties {
margin: 0 8px;
}
.device-phone .phui-document-view.phui-document-view-pro {
padding: 0 8px;
margin: 0 auto;
}
.phui-document-view-pro .phui-document-toc {
position: absolute;
top: 18px;
left: -36px;
}
a.button.phui-document-toc {
display: inline-block;
height: 16px;
width: 16px;
padding: 3px 8px 4px 8px;
}
.phui-document-view-pro .phui-document-toc-list {
margin: 8px;
border: 1px solid {$blueborder};
border-radius: 3px;
box-shadow: {$dropshadow};
width: 200px;
position: absolute;
z-index: 30;
background-color: #fff;
top: 38px;
left: -44px;
}
.device .phui-document-view-pro .phui-document-toc {
display: none;
}
.phui-document-toc-list {
display: none;
}
.phui-document-toc-open .phui-document-toc-list {
display: block;
}
.phui-document-toc-open .phui-document-toc {
background-color: {$blue};
}
.phui-document-toc-open .phui-document-toc .phui-icon-view {
color: #fff;
}
.phui-document-view-pro .phui-document-content .phabricator-remarkup {
padding: 16px 0;
line-height: 1.7em;
}
.device-desktop .phui-document-view.phui-document-view-pro {
border: 0;
}
.phui-document-view.phui-document-view-pro .phui-header-shell {
background: transparent;
border-bottom: 1px solid {$thinblueborder};
}
.phui-document-view.phui-document-view-pro .phui-header-shell {
margin: 0;
padding: 16px 0 32px;
}
.device-phone .phui-document-view.phui-document-view-pro .phui-header-shell {
margin: 8px 0 0 0;
}
.phui-document-view.phui-document-view-pro .phui-header-tall
.phui-header-header {
font-size: 24px;
line-height: 30px;
color: #000;
}
.device-phone .phui-document-view-pro .phui-header-subheader {
display: block;
padding: 8px 0 0 0;
}

5
webroot/rsrc/css/phui/phui-document.css
View file

@ -86,7 +86,6 @@
.phui-header-shell.phui-header-no-backgound
.phui-header-view {
padding: 8px 0 4px;
font-size: {$biggestfontsize};
}
.phui-document-content .phui-property-list-container {
@ -181,11 +180,11 @@ body .phui-document-view .phui-header-shell.phui-bleed-header {
.phui-document-view .PhabricatorMonospaced,
.phui-document-view .phabricator-remarkup .remarkup-code-block .remarkup-code {
font: 11px/14px "Menlo", "Consolas", "Monaco", monospace;
font: 11px/16px "Menlo", "Consolas", "Monaco", monospace;
}
.platform-windows .phui-document-view .PhabricatorMonospaced,
.platform-windows .phui-document-view .phabricator-remarkup .remarkup-code-block
.remarkup-code {
font: 12px/14px "Menlo", "Consolas", "Monaco", monospace;
font: 12px/16px "Menlo", "Consolas", "Monaco", monospace;
}

3
webroot/rsrc/css/phui/phui-fontkit.css
View file

@ -10,7 +10,6 @@
.diviner-document-section .phui-header-header {
font-family: 'Roboto Slab', {$fontfamily};
font-size: 20px;
color: #000;
}
@ -30,5 +29,5 @@
.phui-document-view .phabricator-remarkup h2.remarkup-header {
padding: 0 24px 8px 0;
border-bottom: 1px solid {$thinblueborder};
margin: 24px 0 16px;
margin: 32px 0 16px;
}