Verified Commit ad46518c authored by henry's avatar henry Committed by boklm
Browse files

fixup! BB 40925: Implemented the Security Level component 

TB 44406: Use size tokens.
parent 95088e8f

browser/components/securitylevel/content/securityLevelPanel.css

+10 −10
Original line number Diff line number Diff line 
/* Security Level CSS */



#securityLevel-background {

  min-height: 10em;

  padding-inline: 16px;

  column-gap: 0.5em;

  min-height: 150px;

  padding-inline: var(--space-large);

  column-gap: var(--space-small);

  display: grid;

  grid-template:

    "top-pad icon" 16px

    "top-pad icon" var(--space-large)

    "title icon" auto

    "body icon" auto

    "learn-more icon" auto

    "bottom-pad icon" minmax(8px, 1fr)

    "bottom-pad icon" minmax(var(--space-small), 1fr)

    / auto auto;

}



#securityLevel-background-image {

  grid-area: icon;

  --security-level-icon-size: 9em;

  --security-level-icon-size: 130px;

  width: var(--security-level-icon-size);

  height: var(--security-level-icon-size);

  margin-block: 0.4em;

  margin-block: var(--space-small);

  /* Middle of shield aligns with the panel padding: */

  margin-inline-end: calc(-0.5 * var(--security-level-icon-size));

  align-self: start;
@@ -50,12 +50,12 @@ 
}



#securityLevel-background p {

  margin-block: 0 16px;

  margin-block: 0 var(--space-large);

}



/* Override margin in panelUI-shared.css */

#securityLevel-panel toolbarseparator#securityLevel-separator {

  margin-inline: 16px;

  margin-inline: var(--space-large);

}



#securityLevel-level {
@@ -65,7 +65,7 @@ 
}



#securityLevel-summary {

  max-width: 20em;

  max-width: 300px;

  grid-area: body;

}

browser/components/securitylevel/content/securityLevelPreferences.css

+3 −3
Original line number Diff line number Diff line
@@ -10,8 +10,8 @@ 
.security-level-icon {

  grid-area: icon;

  align-self: start;

  width: 24px;

  height: 24px;

  width: var(--icon-size-large);

  height: var(--icon-size-large);

  -moz-context-properties: fill;

  fill: var(--icon-color);

  margin-block-start: var(--space-xsmall);
@@ -97,7 +97,7 @@ 
#security-level-current {

  margin-block-start: var(--space-large);

  background: var(--background-color-box);

  border: 1px solid var(--border-color);

  border: var(--border-width) solid var(--border-color);

  border-radius: var(--border-radius-small);

  padding: var(--space-medium);

}