Last change
on this file since 38779 was 38779, checked in by davidb, 3 months ago |
Files that need to be moved to <gsdl3srchome>/web to provide a static web page example using an iframe to embedd the React/NextJS based chatbot
|
File size:
1.3 KB
|
Line | |
---|
1 | /**
|
---|
2 | * @file
|
---|
3 | * Utility classes to hide elements in different ways.
|
---|
4 | */
|
---|
5 |
|
---|
6 | /**
|
---|
7 | * Hide elements from all users.
|
---|
8 | *
|
---|
9 | * Used for elements which should not be immediately displayed to any user. An
|
---|
10 | * example would be collapsible details that will be expanded with a click
|
---|
11 | * from a user. The effect of this class can be toggled with the jQuery show()
|
---|
12 | * and hide() functions.
|
---|
13 | */
|
---|
14 | .hidden {
|
---|
15 | display: none;
|
---|
16 | }
|
---|
17 |
|
---|
18 | /**
|
---|
19 | * Hide elements visually, but keep them available for screen readers.
|
---|
20 | *
|
---|
21 | * Used for information required for screen reader users to understand and use
|
---|
22 | * the site where visual display is undesirable. Information provided in this
|
---|
23 | * manner should be kept concise, to avoid unnecessary burden on the user.
|
---|
24 | * "!important" is used to prevent unintentional overrides.
|
---|
25 | */
|
---|
26 | .visually-hidden {
|
---|
27 | position: absolute !important;
|
---|
28 | overflow: hidden;
|
---|
29 | clip: rect(1px, 1px, 1px, 1px);
|
---|
30 | width: 1px;
|
---|
31 | height: 1px;
|
---|
32 | word-wrap: normal;
|
---|
33 | }
|
---|
34 |
|
---|
35 | /**
|
---|
36 | * The .focusable class extends the .visually-hidden class to allow
|
---|
37 | * the element to be focusable when navigated to via the keyboard.
|
---|
38 | */
|
---|
39 | .visually-hidden.focusable:active,
|
---|
40 | .visually-hidden.focusable:focus {
|
---|
41 | position: static !important;
|
---|
42 | overflow: visible;
|
---|
43 | clip: auto;
|
---|
44 | width: auto;
|
---|
45 | height: auto;
|
---|
46 | }
|
---|
47 |
|
---|
48 | /**
|
---|
49 | * Hide visually and from screen readers, but maintain layout.
|
---|
50 | */
|
---|
51 | .invisible {
|
---|
52 | visibility: hidden;
|
---|
53 | }
|
---|
Note:
See
TracBrowser
for help on using the repository browser.