Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
B
bem-sample
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Kazuhiko Shiozaki
bem-sample
Commits
9e57c8a1
Commit
9e57c8a1
authored
Feb 27, 2023
by
Kazuhiko Shiozaki
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add listbox-snippet.html.
parent
b1831e3d
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
83 additions
and
0 deletions
+83
-0
listbox-snippet.html
listbox-snippet.html
+83
-0
No files found.
listbox-snippet.html
0 → 100644
View file @
9e57c8a1
<html>
<head>
<style>
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html
,
body
,
p
,
ol
,
ul
,
li
,
dl
,
dt
,
dd
,
blockquote
,
figure
,
fieldset
,
legend
,
textarea
,
pre
,
iframe
,
hr
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
margin
:
0
;
padding
:
0
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
font-size
:
100%
;
font-weight
:
normal
}
ul
{
list-style
:
none
}
button
,
input
,
select
{
margin
:
0
}
html
{
box-sizing
:
border-box
}
*,*
::before
,*
::after
{
box-sizing
:
inherit
}
img
,
video
{
height
:
auto
;
max-width
:
100%
}
iframe
{
border
:
0
}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
}
td
,
th
{
padding
:
0
}
.facture__container
{
margin
:
1em
;
}
.facture__header_row
{
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1
fr
);
font-weight
:
bold
;
}
.facture__header_column
{
padding
:
0.5em
;
}
.facture__row
{
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1
fr
);
}
.facture__column
{
padding
:
0.5em
;
}
.facture__column--highlighted
{
background
:
#ccc
;
}
@media
(
min-width
:
800px
)
{
.facture__header_row
{
border-bottom
:
1px
solid
#999
;
}
.facture__header_column--highlighted
{
background
:
#ccc
;
border-radius
:
0.5em
0.5em
0
0
;
}
.facture__row
:last-child
.facture__column--highlighted
{
border-radius
:
0
0
0.5em
0.5em
;
}
.facture__header
{
display
:
none
;
}
}
@media
(
max-width
:
800px
)
{
.facture__header_row
{
display
:
none
;
}
.facture__row
{
grid-template-columns
:
1
fr
;
border
:
1px
solid
#999
;
margin-bottom
:
1em
;
}
.facture__header
{
font-weight
:
bold
;
}
}
</style>
</head>
<body>
<!--
This is an example of listbox HTML snippet.
* 'facture' is the name of the listbox. For generic case, you can use 'listbox'.
* '--highlighted' is a modifier class for which you can differentiate the appearance of a certain column.
* You can put more HTML tags "inside" column <div> element, but you mush strictly follow the HTML structure below.
-->
<div
class=
"facture__container"
>
<div
class=
"facture__header_row"
>
<div
class=
"facture__header_column"
>
Header 1
</div>
<div
class=
"facture__header_column facture__header_column--highlighted"
>
Header 2
</div>
<div
class=
"facture__header_column"
>
Header 3
</div>
</div>
<div
class=
"facture__row"
>
<div
class=
"facture__column"
><div
class=
"facture__header"
>
Header 1
</div><div
class=
"facture__data"
>
Value 1-1
</div></div>
<div
class=
"facture__column facture__column--highlighted"
><div
class=
"facture__header"
>
Header 2
</div><div
class=
"facture__data"
>
Value 1-2
</div></div>
<div
class=
"facture__column"
><div
class=
"facture__header"
>
Header 3
</div><div
class=
"facture__data"
>
Value 1-3
</div></div>
</div>
<div
class=
"facture__row"
>
<div
class=
"facture__column"
><div
class=
"facture__header"
>
Header 1
</div><div
class=
"facture__data"
>
Value 2-1
</div></div>
<div
class=
"facture__column facture__column--highlighted"
><div
class=
"facture__header"
>
Header 2
</div><div
class=
"facture__data"
>
Value 2-2
</div></div>
<div
class=
"facture__column"
><div
class=
"facture__header"
>
Header 3
</div><div
class=
"facture__data"
>
Value 2-3
</div></div>
</div>
</div>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment