change border color on org tables

This commit is contained in:
Rachid Mrad 2024-08-29 18:01:14 -04:00
parent 9ff733819f
commit 141037170d
No known key found for this signature in database
5 changed files with 20 additions and 16 deletions

View file

@ -41,7 +41,7 @@ body {
} }
.section--outlined { .section-outlined {
background-color: color('white'); background-color: color('white');
border: 1px solid color('base-lighter'); border: 1px solid color('base-lighter');
border-radius: 4px; border-radius: 4px;
@ -75,9 +75,13 @@ body {
} }
} }
.section--outlined__header--no-portfolio { .section-outlined--border-base-light {
.section--outlined__search, border: 1px solid color('base-light');
.section--outlined__utility-button { }
.section-outlined__header--no-portfolio {
.section-outlined__search,
.section-outlined__utility-button {
margin-top: units(2); margin-top: units(2);
} }
@ -85,11 +89,11 @@ body {
display: flex; display: flex;
column-gap: units(3); column-gap: units(3);
.section--outlined__search, .section-outlined__search,
.section--outlined__utility-button { .section-outlined__utility-button {
margin-top: 0; margin-top: 0;
} }
.section--outlined__search { .section-outlined__search {
flex-grow: 4; flex-grow: 4;
// Align right // Align right
max-width: 383px; max-width: 383px;

View file

@ -21,7 +21,7 @@
</ul> </ul>
{% if domain.permissions %} {% if domain.permissions %}
<section class="section--outlined"> <section class="section-outlined">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
<h2 class> Domain managers </h2> <h2 class> Domain managers </h2>
<caption class="sr-only">Domain managers</caption> <caption class="sr-only">Domain managers</caption>
@ -112,7 +112,7 @@
</section> </section>
{% if domain.invitations.exists %} {% if domain.invitations.exists %}
<section class="section--outlined"> <section class="section-outlined">
<h2>Invitations</h2> <h2>Invitations</h2>
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
<caption class="sr-only">Domain invitations</caption> <caption class="sr-only">Domain invitations</caption>

View file

@ -3,7 +3,7 @@
{% comment %} Stores the json endpoint in a url for easier access {% endcomment %} {% comment %} Stores the json endpoint in a url for easier access {% endcomment %}
{% url 'get_domain_requests_json' as url %} {% url 'get_domain_requests_json' as url %}
<span id="get_domain_requests_json_url" class="display-none">{{url}}</span> <span id="get_domain_requests_json_url" class="display-none">{{url}}</span>
<section class="section--outlined domain-requests" id="domain-requests"> <section class="section-outlined domain-requests{% if portfolio %} section-outlined--border-base-light{% endif %}" id="domain-requests">
<div class="grid-row"> <div class="grid-row">
{% if not has_domain_requests_portfolio_permission %} {% if not has_domain_requests_portfolio_permission %}
<div class="mobile:grid-col-12 desktop:grid-col-6"> <div class="mobile:grid-col-12 desktop:grid-col-6">

View file

@ -5,8 +5,8 @@
{% comment %} Stores the json endpoint in a url for easier access {% endcomment %} {% comment %} Stores the json endpoint in a url for easier access {% endcomment %}
{% url 'get_domains_json' as url %} {% url 'get_domains_json' as url %}
<span id="get_domains_json_url" class="display-none">{{url}}</span> <span id="get_domains_json_url" class="display-none">{{url}}</span>
<section class="section--outlined domains{% if not portfolio %} margin-top-0{% endif %}" id="domains"> <section class="section-outlined domains{% if not portfolio %} margin-top-0{% else %} section-outlined--border-base-light{% endif %}" id="domains">
<div class="section--outlined__header margin-bottom-3 {% if not portfolio %} section--outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}"> <div class="section-outlined__header margin-bottom-3 {% if not portfolio %} section-outlined__header--no-portfolio justify-content-space-between{% else %} grid-row{% endif %}">
{% if not portfolio %} {% if not portfolio %}
<h2 id="domains-header" class="display-inline-block">Domains</h2> <h2 id="domains-header" class="display-inline-block">Domains</h2>
<span class="display-none" id="no-portfolio-js-flag"></span> <span class="display-none" id="no-portfolio-js-flag"></span>
@ -14,7 +14,7 @@
<!-- Embedding the portfolio value in a data attribute --> <!-- Embedding the portfolio value in a data attribute -->
<span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span> <span id="portfolio-js-value" data-portfolio="{{ portfolio.id }}"></span>
{% endif %} {% endif %}
<div class="section--outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %}"> <div class="section-outlined__search {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6{% endif %}">
<section aria-label="Domains search component" class="margin-top-2"> <section aria-label="Domains search component" class="margin-top-2">
<form class="usa-search usa-search--small" method="POST" role="search"> <form class="usa-search usa-search--small" method="POST" role="search">
{% csrf_token %} {% csrf_token %}
@ -43,7 +43,7 @@
</section> </section>
</div> </div>
{% if user_domain_count and user_domain_count > 0 %} {% if user_domain_count and user_domain_count > 0 %}
<div class="section--outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}"> <div class="section-outlined__utility-button mobile-lg:padding-right-105 {% if portfolio %} mobile:grid-col-12 desktop:grid-col-6 desktop:padding-left-3{% endif %}">
<section aria-label="Domains report component" class="mobile-lg:margin-top-205"> <section aria-label="Domains report component" class="mobile-lg:margin-top-205">
<a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled" role="button"> <a href="{% url 'export_data_type_user' %}" class="usa-button usa-button--unstyled" role="button">
<svg class="usa-icon usa-icon--big margin-right-neg-4px" aria-hidden="true" focusable="false" role="img" width="24" height="24"> <svg class="usa-icon usa-icon--big margin-right-neg-4px" aria-hidden="true" focusable="false" role="img" width="24" height="24">

View file

@ -7,8 +7,8 @@
{% block portfolio_content %} {% block portfolio_content %}
<div id="main-content"> <div id="main-content">
<h1 id="domains-header">Domains</h1> <h1 id="domains-header">Domains</h1>
<section class="section--outlined"> <section class="section-outlined">
<div class="section--outlined__header margin-bottom-3"> <div class="section-outlined__header margin-bottom-3">
<h2 id="domains-header" class="display-inline-block">You arent managing any domains.</h2> <h2 id="domains-header" class="display-inline-block">You arent managing any domains.</h2>
{% if portfolio_administrators %} {% if portfolio_administrators %}
<p>If you believe you should have access to a domain, reach out to your organizations administrators.</p> <p>If you believe you should have access to a domain, reach out to your organizations administrators.</p>